<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box">
            <div class="form-title">查看家长信息</div>
            <el-form label-width="100px" class="app-content form" :model="ruleForm" ref="ruleForm" label-position="right">
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">家长身份</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21" v-if="ruleForm.dataForm.length==0">                   
                            <el-col :span="20">
                                <span class="warn-infor">暂无家长关联信息</span>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-for="(site,index) in ruleForm.dataForm" :key="index">
                            <el-col :span="6">
                                <el-form-item label="关联学生：">
                                    <span>{{site.studentName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="e学云ID号：">
                                    <span>{{site.exueCode}}</span>
                                </el-form-item>
                            </el-col>
                                <el-col :span="6" >
                                <el-form-item label="关系：">
                                    <span>{{site.relation}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" >
                                <el-form-item  prop="checkMange"  v-model="site.checkMange">
                                    <el-button  @click="checkParentManage(site.studentId)">查看</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="form-item-title">
                        <span class="title-level">注册信息</span>
                    </div>
                    <div class="form-content">
                        <el-row>                   
                            <el-col :span="6">
                                <el-form-item label="姓名：">
                                    <span>{{ruleForm.realName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="手机号：">
                                    <span>{{ruleForm.phone}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="e学云ID号：">
                                    <span>{{ruleForm.studentId}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="注册情况：">
                                    <span>{{ruleForm.enrollSituation}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--<el-row>
                            <el-col :span="6">
                                <el-form-item label="关联学生数：" >
                                    <span>{{ruleForm.num}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>-->
                    </div>
                    <div class="form-item-title">
                        <span class="title-level">基础信息</span>
                    </div>
                    <div class="form-content">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="所在省：">
                                    <span>{{ruleForm.fProvinceName}}</span>
                                </el-form-item>         
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="所在市：">
                                    <span>{{ruleForm.fCityName}}</span>

                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="所在区县：">
                                    <span>{{ruleForm.fAreaName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <el-form-item class="footer">
                        <el-button @click="submitForm">返回</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import {viewParentInfo} from 'api/parentManagement';
import { mapGetters } from 'vuex';
export default{
    name: 'checkParentManage',
    components: {Levelbar},
    data() {
        return {
            ruleForm: {
                realName: '',
                fProvinceName: '',
                fCityName: '',
                fAreaName: '',
                studentId: '',
                enrollSituation: '',
                phone: '',
                dataForm: [],
                num: ''
            }
        }
    },
    created() {
        this.ruleForm.num = this.$route.params.parentId.split(';')[1]
        this.checkViewParentInfo();
    },
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        checkViewParentInfo() {
            let parentId = this.$route.params.parentId.split(';')[0];
            viewParentInfo(this.$route.params.userId, parentId).then(response => {
                this.ruleForm.fProvinceName = response.data.content.provinces.province || '--';
                this.ruleForm.fCityName = response.data.content.provinces.city || '--';
                this.ruleForm.fAreaName = response.data.content.provinces.area || '--';
                this.ruleForm.realName = response.data.content.registration.name || '--';
                this.ruleForm.phone = response.data.content.registration.phone || '--';
                this.ruleForm.studentId = response.data.content.registration.exueCode || '--';
                this.ruleForm.enrollSituation = response.data.content.registration.registration == true ? '已注册' : '未注册';
                this.ruleForm.dataForm = response.data.content.studentParentRelation;
            });
        },
        checkParentManage(studentId) {
            this.$router.push({path: `/studentManage/studentInforPage/${studentId}`});
        },
        submitForm() {
            this.$router.push({path: '/parentManagement'});
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  @mixin showTitle() {
    background: $bgcolor;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .form-box {
    padding: 0 50px;
    @include showTitle();
    .form-title {
      padding-top:8px;
      text-align: center;
      font-size: 18px;
      color: #333;
      line-height: 72px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 1px solid #ddd;
    }
    .form {
      .form-item {
        padding-bottom: 40px;
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
          }
          
        }
        .warn-infor{
            font-size: 14px;
            color: #333;
        }
        .form-content{
            padding-left:1px;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 40px;
        }
      }
    }
  }
}

</style>